import { swiperProps } from "../../utils/type";

type DataProps = {
  listData: swiperProps[];
  videoInstance: any;
  index: number;
  bottom: number; //计数距离底部的距离视频72 图片24
};

let renderCount = 0;

Component({
  data: <DataProps>{
    listData: [], //接收传递的数据
    videoInstance: [], //保存视频实例
    index: 1,
    bottom: 72,
  },
  properties: {
    list: {
      type: Array,
      value: [],
      observer: "onList",
    },
  },
  lifetimes: {
    ready() {},
  },
  methods: {
    onList(newVal: any[], oldVal: any[]) {
      if (newVal.length) {
        const arr: any[] = [];
        newVal.forEach((item: any) => {
          let obj: swiperProps = item;
          if (item.type === "video") {
            obj.isPlay = false;
          }
          arr.push(obj);
        });
        console.log("initVideo", arr);
        this.setData({
          listData: [...arr],
        });
        setTimeout(() => {
          this.initVideo();
        }, 300);
      }
    },
    initVideo() {
      this.data.videoInstance.length = 0;
      //保存所有的视频对象
      const _this = this;
      this.createSelectorQuery()
        .selectAll(".video")
        .context((res: any) => {
          console.log("res.context", res);
          if (res) {
            const arr: any[] = [];
            res.forEach((item: any) => {
              arr.push(item.context);
            });
            _this.setData({
              videoInstance: [...arr],
            });
            console.log(this.data.listData);
            //如果数据的列表第一个是视频，则播放第一个视频
            if (this.data.listData[0].type === "video") {
              _this.setData({
                bottom: 72,
              });
              setTimeout(() => {
                _this.playVideo(0);
              }, 100);
            }
          }
        })
        .exec();
    },
    bindChange(res: any) {
      //获取当前滚动的下标
      let index = res.detail.current;

      this.setData({
        index: index + 1,
      });

      this.pauseVideo();

      let hasPlay = false;

      this.data.listData.forEach((item) => {
        if (item.type === "video" && item.isPlay) {
          hasPlay = true;
        }
      });

      //当前展示是视频则播放
      if (this.data.listData[index].type === "video") {
        this.playVideo(index);
        this.setData({
          bottom: 72,
        });
      } else {
        this.setData({
          bottom: 24,
        });
      }
    },
    //暂停所有视频
    pauseVideo() {
      this.data.videoInstance.forEach((item: any) => {
        item.pause();
      });
    },
    //播放指定下标视频
    playVideo(i: number) {
      console.log("videoInstance", this.data.videoInstance);
      this.data.videoInstance.forEach((item: any, index: number) => {
        if (i === index) {
          item.play();
        }
      });
    },
    //监听视频暂停
    bindplay(res: any) {
      console.log("play", res);
      let index = res.currentTarget.dataset.index;
      let key = `listData[${[index]}].isPlay`;
      this.setData({
        [key]: true,
      });
    },
    //监听视频播放
    bindpause(res: any) {
      console.log("pause", res);
      let index = res.currentTarget.dataset.index;
      let key = `listData[${[index]}].isPlay`;
      this.setData({
        [key]: false,
      });
    },
    //点击播放视频
    onPlayVideo(res: any) {
      console.log("click", res);
      let index = res.currentTarget.dataset.index;
      let key = `listData[${[index]}].isPlay`;
      this.setData({
        [key]: true,
      });
      this.playVideo(index);
    },
  },
});
